$slider-name: typingslider;
$slides: 2;
$typing-duration: 4s;
$tab-letters: 20 33; //number of characters in each paragraph
$slider-font-size: 2.5rem;
$background: #FFf;


// body {
//   display: flex;
//   justify-content: center;
//   align-items: center;
//   height: 100vh;
// //   background-color: $background;
// }

@keyframes cursor {
  from, to { border-color: transparent; }
  50% { border-color: black; }
}

@keyframes typing {
  from { width: 100%; }
  90%, to { width: 0; }
}

@keyframes slide {
  #{100% / $slides} { font-size: $slider-font-size; letter-spacing: 3px; }
  to { font-size: 0; letter-spacing: 0; }
}

.#{$slider-name} {
  font-family: Consolas, monospace;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
}

.#{$slider-name} p {
  position: relative;
  display: inline;
  font-size: 0;
  text-transform: uppercase;
  letter-spacing: 0;
  animation: slide $typing-duration * $slides step-start infinite;
}

.#{$slider-name} p::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  border-left: 3px solid black;
  background-color: $background;
  animation: typing $typing-duration infinite,
             cursor 1s infinite;
}

html[data-theme='dark'] .#{$slider-name} p::after{
  background-color:#1b1b1d;
}

@each $letters in $tab-letters {
  $i: index($tab-letters, $letters);
  .#{$slider-name} p:nth-child(#{$i}) {
    animation-delay:  $typing-duration * ($i - 1);
    &::after {
      animation-delay: $typing-duration * ($i - 1);
      animation-timing-function: steps(#{$letters}), step-end;
    }
  }
}